<!-- 测试页面：当作基本模版使用 -->
<template>

    <div class="all_box_books">
      <el-row class="books_order_method">
        <span>排序方式： </span>
        <el-button-group>
          <el-button type="info" @click.native="orderByZan">点赞最多</el-button>
          <el-button type="info" @click.native="orderByDownNum">下载最多</el-button>
          <el-button type="info" @click.native="orderByTime">最新</el-button>
        </el-button-group>
      </el-row>
      <el-row class="books_area" >
        <el-col :span="5" :offset="2" v-for="book in booklist">

            <el-card shadow="hover">
              <a href="bookdetails" id="to_details">
              <img src="../../../public/images/book10.jpg" class="image" />
              <div class="charactor">
                <span class="book_tittle">{{book.name}}</span>
                <div class="inro">
                  <span>{{book.intro}}</span>
                </div>
              </div>
              </a>
              <div class="order_info">
                <el-button-group>
                  <el-button type="info" icon="el-icon-caret-top">{{book.zan}}</el-button>
                  <el-button type="info" icon="el-icon-download">{{book.downNum}}</el-button>
                </el-button-group>
              </div>
            </el-card>

        </el-col>

      </el-row>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryBooksInfo.pageNum" :page-sizes="[6,9,15,21]" :page-size="queryBooksInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
</template>

<!-- 定义JS变量 -->
<script>
export default {
  name: 'searched',
  props: ['queryInfo'],
  created () {
    this.getsearchedbooklist()
  },
  data () {
    return {
      booklist: [
        {
          faceAddr: '',
          name: '',
          intro: ''
        }
      ],
      queryBooksInfo: {
        query: this.$store.getters.getQuery, //定义查询参数
        queryType: 0,
        pageNum: 1,
        pageSize: 9
      },
      total: 0
    }
  },
  methods: {
    async getsearchedbooklist () {
      const {
        data: res
      } = await this.$http.get('/book/searchall', {
        params: this.queryBooksInfo
      })
      console.log(this.queryBooksInfo.query+"search_page")
      if (res.status !== 200) return this.$message.error('查询失败')
      this.booklist = res.data.rows
      this.total = res.data.total
      console.log(res.data.rows)
      // console.log("-----"+this.$children[0])
    },
    handleSizeChange(size) {
      this.queryBooksInfo.pageSize = size
      this.getsearchedbooklist()
    },
    //页码值变化时 调用
    handleCurrentChange(current) {
      this.queryBooksInfo.pageNum = current
      this.getsearchedbooklist()
    },
    orderByZan() {
      this.queryBooksInfo.queryType = 1
      this.getsearchedbooklist()
    },
    orderByDownNum() {
      this.queryBooksInfo.queryType = 2
      this.getsearchedbooklist()
    },
    orderByTime() {
      this.queryBooksInfo.queryType = 3
      this.getsearchedbooklist()
    }
  }
}
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
.all_box_books {
    margin: 0 auto;
    width: 100%;

    .books_order_method {

      // color: black;
      .el-button-group {
        .el-button {
          color: black;
          background-color: #806d9e;
        }
      }
    }

    .books_area {
      // position: relative;
      margin-bottom: 20px;


      .el-col {
        #to_details {
          text-decoration: none;
        }

        .el-card {
          height: 330px;
          width: 250px;
          position: relative;

          .image {
            // width: 100%;
            width: 80%;
            margin: 0 auto;
            display: block;
          }

          .charactor {
            margin-top: 10px;

            .book_tittle {
              font-size: large;
              font-weight: bold;
            }

            .inro {}

          }

          .order_info {
            position: absolute;
            bottom: 8px;

            .el-button-group {

              .el-button {
                padding: 0;
                width: 105px;
                height: 30px;
                // border: none;
              }
            }
          }
        }
      }
    }
  }


</style>
